<script>
import Footer from './Footer.vue'
import Logo from './Logo.vue'

export default {
    components : {
        Footer,
        Logo
    },
    methods:{
        routeLogin(){
            this.$router.push("/login")
        }
    }
}

</script>

<template>
    <header>
        <div class="header-container">
            <div class="logo-wrapper">
                <Logo/>
                <span class="welcome-tip">欢迎注册</span>
            </div>
            <span class="login-wrapper">已有账号？<a href="#" @click.prevent="routeLogin" class="login-link">立即登录</a></span>
        </div>
    </header>
    <main>
        <div class="body-container">
            <el-form label-width="120px">
                <el-form-item label="手机号">
                    <el-input/>
                </el-form-item>
                <el-form-item label="图形验证码">
                    <el-input/>
                </el-form-item>
                <el-form-item label="短信验证码">
                    <el-input/>
                </el-form-item>
                <el-form-item label="输入密码">
                    <el-input/>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input/>
                </el-form-item>
                <el-form-item>
                    <el-button class="regist-btn">同意条款并注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </main>
    <Footer/>
</template>

<style scoped>
header{
    display: flex;
    height: 90px;
    justify-content: center;
    align-items: center;
}

.login-wrapper{
    color: #c8c8c8;
    font-size: 1em;
}

.login-link{
    color: black;
}

.login-link:hover{
    color: red;
    background-color: white;
}

.body-container{
    .el-input,.el-button{
        width: 300px;
    }
}

.regist-btn{
    width: 100%;
}

.body-container{
    width: 30%;
    margin-left: 20%;
    padding-top: 50px;
}

main{
    display: flex;
    margin: 0 auto;
    height: calc(100% - 190px);
    background-image: url('../assets/regist-bg.jpg');
}

.logo-wrapper{
    width: 60%;
}

.header-container{
    width: 60%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.welcome-tip{
    margin-left: 20px;
}

</style>
